<template>
    <div class="app-container">
        <!-- 筛选框 -->
        <div class="filter-container">
            <el-form inline>
                <el-form-item label="名称">
                    <el-input v-model="filter.name" placeholder="请输入课程名称" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="filter.status" placeholder="请选择课程状态" class="w-[100px]">
                        <el-option label="全部" value="" />
                        <el-option label="已上架" :value="1" />
                        <el-option label="未上架" :value="0" />
                        <el-option label="已下架" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="showDialog()">新增课程</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格 -->
        <div class="table-container">
            <el-table :data="pageInfo.data" border>
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="type.name" label="课程分类" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="time_len" label="课程时间" width="80" />
                <el-table-column label="课程套餐" min-width="150">
                    <template slot-scope="{ row }">
                        <el-table v-if="row.packages.length" :data="row.packages" :show-header="false" border>
                            <el-table-column prop="package_name" label="套餐名称" />
                            <el-table-column prop="course_num" width="50" label="课时" />
                            <el-table-column prop="package_price" width="80" label="价格" />
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="img" label="课程图片">
                    <template slot-scope="{ row }">
                        <el-image v-if="row.img" :src="row.img" style="width: 80px; height: 80px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="statusText" label="课程状态" width="80px" />
                <el-table-column prop="desc" label="课程描述" />
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <router-link :to="{ name: 'StudentCourse', query: { courseId: scope.row.id, courseName: scope.row.name } }">
                            <el-button class="mr-2" type="text" size="small">报课</el-button>
                        </router-link>
                        <el-button type="text" size="small" @click="showDialog(scope.$index)">编辑</el-button>
                        <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="pageInfo.total"
                :current-page="pageInfo.current_page"
                :page-size="pageInfo.per_page"
            />
        </div>
        <!-- 弹窗 -->
        <div class="modal-container">
            <el-dialog center :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogVisible" width="1200px">
                <el-form :model="temp" label-width="120px">
                    <el-row :gutter="10">
                        <!-- 第一栏 基本信息 -->
                        <el-col :span="7">
                            <el-form-item label-width="0"><div class="text-center font-bold bg-gray">基本信息</div></el-form-item>
                            <el-form-item label="课程名称">
                                <el-input v-model="temp.name" class="w-200" />
                            </el-form-item>
                            <el-form-item label="课程分类">
                                <el-select v-model="temp.type_id" class="w-200" placeholder="请选择课程分类">
                                    <el-option :key="0" label="请选择" :value="0" />
                                    <el-option v-for="item in courseTypes" :key="item.id" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="单课时长">
                                <div class="flex items-center">
                                    <el-input v-model="temp.time_len" type="number" class="w-80" />
                                    <span class="ml-5">分钟</span>
                                </div>
                            </el-form-item>
                            <el-form-item label="课程图片">
                                <UploadImage v-model="temp.img" width="100px" />
                            </el-form-item>
                            <el-form-item label="课程状态">
                                <el-select v-model="temp.status" class="w-200">
                                    <el-option label="上架" :value="1" />
                                    <el-option label="下架" :value="0" />
                                    <el-option label="禁用" :value="2" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="课程描述">
                                <el-input v-model="temp.desc" class="w-200" />
                            </el-form-item>
                        </el-col>
                        <!-- 第二栏 套餐信息 -->
                        <el-col :span="8">
                            <el-form-item label-width="0"><div class="text-center font-bold bg-gray">套餐信息</div></el-form-item>
                            <el-table :data="temp.packages" border>
                                <el-table-column prop="name" label="套餐名称">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.package_name" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="course_num" label="课程数量">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.course_num" type="number" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="package_price" label="套餐价格">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.package_price" type="number" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="50">
                                    <template slot-scope="scope">
                                        <el-button v-if="scope.$index < temp.packages.length - 1" type="text" size="small" icon="el-icon-delete" @click="temp.packages.splice(scope.$index, 1)" />
                                        <el-button v-if="scope.$index === temp.packages.length - 1" type="text" size="small" icon="el-icon-plus" @click="insertPackage()" />
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                        <!-- 第三栏 提成信息 -->
                         <el-col :span="9">
                            <el-form-item label-width="0"><div class="text-center font-bold bg-gray">老师提成</div></el-form-item>
                            <el-tabs v-model="temp.commission_type" type="border-card">
                                <el-tab-pane label="固定佣金" name="fixed">
                                    <el-input v-model="temp.commission_fixed" type="number" placeholder="请输入固定金额" />
                                </el-tab-pane>
                                <el-tab-pane label="按人提成" name="num">
                                    <el-form-item label="基本佣金">
                                        <el-input v-model="temp.commission_num_base_price" type="number" placeholder="基本佣金" />
                                    </el-form-item>
                                    <el-form-item label="基本人数">
                                        <el-input v-model="temp.commission_num_base_num" type="number" placeholder="基本人数" />
                                    </el-form-item>
                                    <el-form-item label="超量单人提成">
                                        <el-input v-model="temp.commission_num_per" type="number" placeholder="超出基本人数 每人提成金额" />
                                    </el-form-item>
                                </el-tab-pane>
                                <el-tab-pane label="分段提成" name="stage">
                                    <el-table :data="temp.commission_stage">
                                        <el-table-column prop="min" label="人数范围" width="170">
                                            <template slot-scope="scope">
                                                <div class="flex items-center">
                                                    <el-input v-model="scope.row.min" type="number" style="padding:0;" />到
                                                    <el-input v-model="scope.row.max" type="number" :min="0" style="padding:0;" />
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="price" label="总提成">
                                            <template slot-scope="scope">
                                                <el-input v-model="scope.row.total" type="number" :min="0" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="per" label="单人提成" width="80">
                                            <template slot-scope="scope">
                                                <el-input v-model="scope.row.per" type="number" :min="0" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="50">
                                            <template slot-scope="scope">
                                                <el-button v-if="scope.$index < temp.commission_stage.length - 1" type="text" size="small" icon="el-icon-delete" @click="temp.commission_stage.splice(scope.$index, 1)" />
                                                <el-button v-if="scope.$index === temp.commission_stage.length - 1" type="text" size="small" icon="el-icon-plus" @click="insertCommissionStage()" />
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                            </el-tabs>
                            <el-form-item label="将提成规则应用到所有课程" label-width="200px" class="mt-20 w-300">
                                <el-select v-model="temp.commission_same">
                                    <el-option label="是" :value="1" />
                                    <el-option label="否" :value="0" />
                                </el-select>
                            </el-form-item>
                         </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSave()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import CourseApi from '@/api/course' // 导入课程管理的Ap
import CourseTypeApi from '@/api/course-type'
import UploadImage from '../components/UploadImage'

export default {
    name: 'CourseIndex',
    components: { UploadImage },
    data() {
        return {
            dialogVisible: false,
            dialogTitle: '新增课程',
            filter: {
                name: '',
                status: 1
            },
            courseTypes: [],
            pageInfo: {
                total: 0,
                current_page: 1,
                per_page: 10,
                data: []
            },
            temp: {
                id: 0,
                type_id: 0,
                name: '',
                time_len: '',
                img: '',
                status: 0,
                desc: '',
                packages: [],
                commission_same: 0,
                commission_type: 'fixed',
                commission_fixed: 0,
                commission_num_base: 0,
                commission_num_min: 0,
                commission_num_per: 0,
                commission_stage: [
                    { min: 0, max: 0, total: 0, per: 0 }
                ]
            },
            emptyTemp: null,
            emptyPackage: {
                id: 0,
                'package_name': '',
                'course_num': 0,
                'package_price': 0
            }
        }
    },
    mounted() {
    },
    created() {
        this.emptyTemp = JSON.parse(JSON.stringify(this.temp))
        CourseTypeApi.list().then(res => {
            this.courseTypes = res.data
        })
        this.getList()
    },
    methods: {
        resetTemp() {
            this.temp = JSON.parse(JSON.stringify(this.emptyTemp))
            this.insertPackage()
        },
        showDialog(index) {
            this.dialogVisible = true
            if (typeof index === 'number') {
                this.dialogTitle = '编辑课程类型'
                this.temp = Object.assign({ commission_same: 0 }, this.pageInfo.data[index])
                if (this.temp.packages.length === 0) {
                    this.insertPackage()
                }
                // 处理佣金阶段
                // this.temp.commission_same = 0
                if (this.temp.commission_stage) {
                    this.temp.commission_stage = JSON.parse(this.temp.commission_stage)
                } else {
                    this.temp.commission_stage = []
                    this.insertCommissionStage()
                }
            } else {
                this.dialogTitle = '新增课程类型'
                this.resetTemp()
            }
        },
        getList() {
            const data = {
                name: this.filter.name,
                status: this.filter.status,
                page: this.pageInfo.current_page,
                per_page: this.pageInfo.per_page
            }

            CourseApi.page(data).then(res => {
                const data = res.data.data
                data.forEach(item => {
                    item.statusText = item.status === 1 ? '上架中' : item.status === 0 ? '未下架' : '已禁用'
                    item.priceText = item.price + '/' + (item.price_type === 0 ? '单节' : '课包')
                })
                this.pageInfo = res.data
            })
        },
        handleSearch() {
            this.pageInfo.current_page = 1
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageInfo.current_page = val
            this.getList()
        },
        handleSave() {
            CourseApi.save(this.temp).then(res => {
                this.dialogVisible = false
                this.$message({ message: '添加成功', type: 'success' })
                this.getList()
                this.resetTemp()
            })
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除该课程, 是否继续?', '提示').then(res => {
                CourseApi.delete(row.id).then(res => {
                    this.$message.success('删除成功')
                    this.getList()
                })
            }).catch(err => { console.log(err) })
        },
        insertPackage() {
            this.temp.packages.push(Object.assign({}, this.emptyPackage))
        },
        insertCommissionStage() {
            const len = this.temp.commission_stage.length
            let newMin = 0
            if (len > 0) {
                const lastStage = this.temp.commission_stage[len - 1]
                if (lastStage.max <= lastStage.min) {
                    this.$message.error('请填完当前的数据')
                    return false
                }
                newMin = Number(lastStage.max) + 1
            }
            this.temp.commission_stage.push({ min: newMin, max: 0, total: 0, per: 0 })
        }
    }
}
</script>
